import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:ichinesereader/constants.dart';
import 'package:ichinesereader/controller/cache.dart';
import 'package:ichinesereader/controller/user.dart';
import 'package:ichinesereader/utils/log.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:get/get.dart';
import '../../themes/appTheme.dart';

class LevelProgressIndicatorWidget extends StatelessWidget {
  LevelProgressIndicatorWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Log.debug('build LevelProgressIndicatorWidget');
    final UserController controller = Get.find();
    final box = Hive.box('appconfig');
    bool isParent = box.get(CacheManagerKey['nanhairole'].toString()) ==
        Constants.NanhaiRole_Parent;

    String? level = '1';
    return controller.obx(
      (data) {
        if (controller.profile.value.userName != null) {
          int progress = 0;
          //String _currentLevel = 'Current Level:'.tr;
          if (isParent) {
            try {
              level = controller.currentChild.value.level
                  .toString()
                  .replaceAll('level', '');
              progress = controller.currentChild.value.levelPercentage!;
            } catch (error) {
              Log.debug(error);
            }
          } else {
            try {
              level = controller.profile.value.level
                  .toString()
                  .replaceAll('level', '');
              progress = controller.profile.value.levelPercentage!;
            } catch (error) {
              Log.debug(error);
            }
          }

          return Container(
            decoration: BoxDecoration(
              color: Get.isDarkMode
                  ? AppTheme.colors.darkTheme2
                  : Color(0xffa3fca8).withOpacity(0.3),
              boxShadow: [
                BoxShadow(
                  blurRadius: 6,
                  spreadRadius: 1,
                  color: Get.isDarkMode
                      ? Colors.transparent
                      : Colors.black.withOpacity(0.1),
                  offset: Offset(3, 3),
                ),
              ],
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(3.0),
                bottomLeft: Radius.circular(3.0),
                topRight: Radius.circular(3.0),
                bottomRight: Radius.circular(3.0),
              ),
            ),
            child: new LinearPercentIndicator(
              padding: EdgeInsets.only(left: 9.0, top: 2, bottom: 2),
              progressColor: Get.isDarkMode
                  ? Theme.of(context).primaryColorDark
                  : Color(0xff8db4f9).withOpacity(0.9),
              animation: true,
              lineHeight: 24.0,
              animationDuration: 1500,
              percent: (progress / 100).toDouble(),
              center: Text(
                // "$_currentLevel $level",
                "$progress%",
                maxLines: 1,
                overflow: TextOverflow.fade,
                softWrap: false,
                style: TextStyle(
                  fontSize: 12.0,
                  letterSpacing: 1,
                  color: Get.isDarkMode
                      ? Colors.black
                      : Colors.blueGrey.withOpacity(0.9),
                ),
              ),
              trailing: Container(
                margin: EdgeInsets.only(left: 15),
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                ),
                width: 51,
                height: 51,
                decoration: BoxDecoration(
                  color: Get.isDarkMode
                      ? Get.theme.primaryColor
                      : Colors.white.withOpacity(0.8),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(0),
                    bottomLeft: Radius.circular(0),
                    topRight: Radius.circular(3),
                    bottomRight: Radius.circular(3),
                  ),
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 1,
                      spreadRadius: 1,
                      color: Get.isDarkMode
                          ? Colors.transparent
                          : Colors.lightGreen.withOpacity(0.3),
                      offset: Offset(1, 1),
                    ),
                    BoxShadow(
                      blurRadius: 1,
                      spreadRadius: 1,
                      color: Get.isDarkMode
                          ? Colors.transparent
                          : Colors.lightGreen.withOpacity(0.3),
                      offset: Offset(-1, -1),
                    ),
                  ],
                ),
                child: Center(
                  child: Text(
                    // "$progress%",
                    "L $level",
                    maxLines: 1,
                    style: TextStyle(
                      color: Get.isDarkMode
                          ? Get.theme.primaryColorDark
                          : Colors.lightGreen,
                      fontSize: 14.0,
                      fontWeight: FontWeight.bold,
                      overflow: TextOverflow.fade,
                    ),
                  ),
                ),
              ),
              barRadius: Radius.circular(16),
              backgroundColor: Get.isDarkMode
                  ? Theme.of(context).primaryColor
                  : Theme.of(context).primaryColorLight,
            ),
          );
          //   LinearPercentIndicator(
          //   progressColor: Get.isDarkMode
          //       ? Theme.of(context).primaryColor
          //       : Theme.of(context).primaryColor,
          //   animation: true,
          //   lineHeight: 21.0,
          //   animationDuration: 1500,
          //   percent: progress / 100,
          //   center: Text(
          //     "$_currentLevel ${controller.profile.value.level.toString().replaceAll('level', '')}  -  $progress%",
          //     style: TextStyle(
          //       color: Colors.black,
          //       fontSize: 14.0,
          //     ),
          //   ),
          //   barRadius: Radius.circular(16),
          //   backgroundColor: Get.isDarkMode
          //       ? Theme.of(context).primaryColorDark
          //       : Colors.black.withOpacity(0.2),
          // );
        } else {
          return Text('');
        }
      },
      //onLoading: Center(child: CircularProgressIndicator()),
    );

    // Obx(() {
    //   if (controller.profile.value.userName != null) {
    //     //String? level = '1';
    //     double? progress = 0;
    //     String _currentLevel = 'Current Level:'.tr;
    //     try {
    //       // level = _userController.profile.value.level
    //       //     .toString()
    //       //     .replaceAll('level', '');
    //       progress =
    //           (controller.profile.value.levelPercentage! / 100).toDouble();
    //     } catch (error) {
    //       Log.debug(error);
    //     }
    //     return LinearPercentIndicator(
    //       progressColor: Get.isDarkMode
    //           ? Theme.of(context).primaryColorDark
    //           : Colors.blueGrey[200],
    //       animation: true,
    //       lineHeight: 24.0,
    //       animationDuration: 1500,
    //       percent: progress ?? 0,
    //       center: Text(
    //         "$_currentLevel ${controller.profile.value.level.toString().replaceAll('level', '')}  -  ${progress! * 100}%",
    //         style: TextStyle(
    //             color: Get.isDarkMode ? Colors.white : Colors.black,
    //             fontSize: 16.0,
    //             fontWeight: FontWeight.w700),
    //       ),
    //       barRadius: Radius.circular(16),
    //       backgroundColor: Get.isDarkMode
    //           ? Theme.of(context).primaryColor
    //           : Theme.of(context).primaryColorLight,
    //     );
    //   } else {
    //     return Text('');
    //   }
    // });
  }
}
